<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扣子空间 - AI智能体协同办公平台</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
            background-color: #f9fafb;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
        }
        .section-title {
            position: relative;
            padding-bottom: 0.5rem;
        }
        .section-title:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 3rem;
            height: 3px;
            background: linear-gradient(90deg, #4f46e5, #a855f7);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .text-gradient {
            background: linear-gradient(90deg, #4f46e5, #a855f7);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .drop-cap:first-letter {
            float: left;
            font-size: 4.5rem;
            line-height: 0.65;
            margin: 0.1em 0.1em 0.2em 0;
            color: #4f46e5;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <div class="hero-gradient text-white pb-20">
        <div class="container mx-auto px-6 pt-16">
            <div class="flex flex-col md:flex-row items-center justify-between">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">扣子空间 <span class="text-purple-200">Coze Space</span></h1>
                    <h2 class="text-xl md:text-2xl font-medium mb-8 text-purple-100">人与AI智能体协作的工作空间</h2>
                    <p class="text-lg mb-8 text-purple-50 opacity-90">字节跳动推出的通用型AI Agent开发与协同办公平台，通过智能化工具提升工作效率和创造力</p>
                    <a href="https://www.coze.cn/" target="_blank" class="inline-block bg-white text-purple-700 font-semibold px-8 py-3 rounded-lg hover:bg-purple-50 transition duration-300 shadow-lg">
                        <i class="fas fa-external-link-alt mr-2"></i>访问官网
                    </a>
                </div>
                <div class="md:w-2/5">
                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1753535238315-605aab74-276f-4dca-86f1-546c637032f4.png" alt="扣子空间界面" class="rounded-xl shadow-2xl border-4 border-white border-opacity-20">
                </div>
            </div>
        </div>
    </div>

    <!-- Core Features Section -->
    <div class="py-16 bg-white">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold mb-12 text-center section-title inline-block">核心功能</h2>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12">
                <!-- Feature 1 -->
                <div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300 border border-gray-100">
                    <div class="text-purple-600 text-3xl mb-4">
                        <i class="fas fa-tasks"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">智能任务拆解与执行</h3>
                    <p class="text-gray-600">自动分析用户需求，将复杂任务拆解为子任务，通过AI Agent自主调用工具完成，从网页设计到文档生成一站式解决。</p>
                </div>
                
                <!-- Feature 2 -->
                <div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300 border border-gray-100">
                    <div class="text-purple-600 text-3xl mb-4">
                        <i class="fas fa-compass"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">探索与规划双模式</h3>
                    <p class="text-gray-600">探索模式快速响应简单需求，规划模式深度思考复杂任务，提供详细计划并与用户协作确认。</p>
                </div>
                
                <!-- Feature 3 -->
                <div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300 border border-gray-100">
                    <div class="text-purple-600 text-3xl mb-4">
                        <i class="fas fa-puzzle-piece"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">丰富的插件生态</h3>
                    <p class="text-gray-600">支持MCP协议，集成60+插件，可通过Coze Store自定义插件并发布，支持与企业内部系统无缝集成。</p>
                </div>
                
                <!-- Feature 4 -->
                <div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300 border border-gray-100">
                    <div class="text-purple-600 text-3xl mb-4">
                        <i class="fas fa-brain"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">多模态交互与知识库</h3>
                    <p class="text-gray-600">支持文本、图像、语音交互，提供知识库功能，AI能基于上传数据回答问题并保持长期记忆。</p>
                </div>
                
                <!-- Feature 5 -->
                <div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300 border border-gray-100">
                    <div class="text-purple-600 text-3xl mb-4">
                        <i class="fas fa-share-alt"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">跨平台发布</h3>
                    <p class="text-gray-600">AI智能体可发布到飞书、豆包、微信公众号等平台，未来将支持WhatsApp和Twitter等国际平台。</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Technical Architecture Section -->
    <div class="py-16 bg-gray-50">
        <div class="container mx-auto px-6">
            <div class="flex flex-col md:flex-row">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h2 class="text-3xl font-bold mb-6 section-title inline-block">技术架构</h2>
                    <p class="text-lg mb-6 drop-cap">扣子空间基于字节自研的豆包1.5 Pro大模型，支持多模态交互和复杂任务拆解。MCP协议是其核心技术亮点，定义了AI与外部工具的标准化交互接口，类似"大模型的USB-C接口"，解决了传统Function Call的兼容性问题。</p>
                    <p class="text-lg mb-6">平台通过与飞书生态的深度绑定，实现了跨平台协作的高效性，为企业用户和个人开发者提供了强大的技术支撑。</p>
                    
                    <div class="mermaid mt-8">
                        graph TD
                            A[豆包1.5 Pro大模型] --> B[多模态交互]
                            A --> C[复杂任务拆解]
                            D[MCP协议] --> E[标准化工具接口]
                            D --> F[解决兼容性问题]
                            B --> G[跨平台协作]
                            C --> G
                            E --> G
                    </div>
                </div>
                <div class="md:w-1/2 md:pl-12">
                    <div class="bg-white p-8 rounded-xl shadow-md border border-gray-200">
                        <h3 class="text-2xl font-bold mb-6 text-purple-700">核心组件</h3>
                        <ul class="space-y-4">
                            <li class="flex items-start">
                                <span class="text-purple-500 mr-3 mt-1"><i class="fas fa-microchip"></i></span>
                                <div>
                                    <h4 class="font-bold text-gray-800">豆包1.5 Pro</h4>
                                    <p class="text-gray-600">字节自研大模型，支持多轮对话、复杂推理和内容生成</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <span class="text-purple-500 mr-3 mt-1"><i class="fas fa-plug"></i></span>
                                <div>
                                    <h4 class="font-bold text-gray-800">MCP协议</h4>
                                    <p class="text-gray-600">模型上下文协议，标准化AI与工具交互方式</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <span class="text-purple-500 mr-3 mt-1"><i class="fas fa-project-diagram"></i></span>
                                <div>
                                    <h4 class="font-bold text-gray-800">插件系统</h4>
                                    <p class="text-gray-600">60+插件支持，跨平台工具集成能力</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <span class="text-purple-500 mr-3 mt-1"><i class="fas fa-cloud"></i></span>
                                <div>
                                    <h4 class="font-bold text-gray-800">云基础设施</h4>
                                    <p class="text-gray-600">弹性计算资源，确保稳定高效的服务</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Application Scenarios Section -->
    <div class="py-16 bg-white">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold mb-12 text-center section-title inline-block">应用场景</h2>
            
            <div class="grid md:grid-cols-2 gap-8 mt-8">
                <!-- Scenario 1 -->
                <div class="bg-gray-50 rounded-xl overflow-hidden shadow-md">
                    <div class="h-48 bg-purple-600 flex items-center justify-center">
                        <i class="fas fa-pen-fancy text-white text-6xl"></i>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-3">内容创作</h3>
                        <p class="text-gray-600">生成播客脚本、办公文档、PPT等，满足文字和音频创作需求。AI能够根据主题自动生成高质量内容，大幅提升创作效率。</p>
                    </div>
                </div>
                
                <!-- Scenario 2 -->
                <div class="bg-gray-50 rounded-xl overflow-hidden shadow-md">
                    <div class="h-48 bg-purple-500 flex items-center justify-center">
                        <i class="fas fa-code text-white text-6xl"></i>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-3">网页开发</h3>
                        <p class="text-gray-600">通过自然语言编辑或上传设计稿，快速生成响应式网站，如个人简历网站或产品销售页面，无需编码经验。</p>
                    </div>
                </div>
                
                <!-- Scenario 3 -->
                <div class="bg-gray-50 rounded-xl overflow-hidden shadow-md">
                    <div class="h-48 bg-purple-400 flex items-center justify-center">
                        <i class="fas fa-chart-line text-white text-6xl"></i>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-3">市场调研与数据分析</h3>
                        <p class="text-gray-600">AI搜索和分析功能帮助用户获取信息洞察，自动生成分析报告，提供可视化数据，提升决策效率。</p>
                    </div>
                </div>
                
                <!-- Scenario 4 -->
                <div class="bg-gray-50 rounded-xl overflow-hidden shadow-md">
                    <div class="h-48 bg-purple-300 flex items-center justify-center">
                        <i class="fas fa-building text-white text-6xl"></i>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-3">企业解决方案</h3>
                        <p class="text-gray-600">为中大型企业提供定制化Agent开发和私有化部署，如司法调解Agent与法院系统联动，案件处理效率提升80%。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Pros & Cons Section -->
    <div class="py-16 bg-gray-50">
        <div class="container mx-auto px-6">
            <div class="flex flex-col md:flex-row gap-8">
                <div class="md:w-1/2">
                    <div class="bg-white p-8 rounded-xl shadow-md border-t-4 border-green-500">
                        <h3 class="text-2xl font-bold mb-6 text-green-600">
                            <i class="fas fa-thumbs-up mr-2"></i>优势
                        </h3>
                        <ul class="space-y-4">
                            <li class="flex items-start">
                                <span class="text-green-500 mr-3 mt-1"><i class="fas fa-check-circle"></i></span>
                                <div>
                                    <h4 class="font-bold text-gray-800">低门槛开发</h4>
                                    <p class="text-gray-600">无论是否有编程经验，用户均可通过拖拽节点或自然语言快速创建AI智能体</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <span class="text-green-500 mr-3 mt-1"><i class="fas fa-check-circle"></i></span>
                                <div>
                                    <h4 class="font-bold text-gray-800">高效协作</h4>
                                    <p class="text-gray-600">"人在环路"机制，实时查看任务拆解和中间结果，避免"黑盒"风险</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <span class="text-green-500 mr-3 mt-1"><i class="fas fa-check-circle"></i></span>
                                <div>
                                    <h4 class="font-bold text-gray-800">生态整合</h4>
                                    <p class="text-gray-600">与飞书、豆包等字节系产品深度整合，跨平台协作效率领先</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                
                <div class="md:w-1/2">
                    <div class="bg-white p-8 rounded-xl shadow-md border-t-4 border-red-500">
                        <h3 class="text-2xl font-bold mb-6 text-red-600">
                            <i class="fas fa-exclamation-triangle mr-2"></i>不足
                        </h3>
                        <ul class="space-y-4">
                            <li class="flex items-start">
                                <span class="text-red-500 mr-3 mt-1"><i class="fas fa-times-circle"></i></span>
                                <div>
                                    <h4 class="font-bold text-gray-800">稳定性问题</h4>
                                    <p class="text-gray-600">内测阶段存在任务丢失或数据更新不及时的问题</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <span class="text-red-500 mr-3 mt-1"><i class="fas fa-times-circle"></i></span>
                                <div>
                                    <h4 class="font-bold text-gray-800">网络限制</h4>
                                    <p class="text-gray-600">部分功能（如搜索西方网站）受限于国内网络环境</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Open Source Section -->
    <div class="py-16 bg-purple-700 text-white">
        <div class="container mx-auto px-6">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-2/3 mb-10 md:mb-0">
                    <h2 class="text-3xl font-bold mb-6">开源与社区支持</h2>
                    <p class="text-lg mb-6">2025年7月25日，扣子空间宣布开源其核心业务：Coze Studio（开发平台）和Coze Loop（罗盘）。Coze Studio支持通过拖拽节点自由编排工作流，为开发者提供了高度灵活的智能体开发环境。</p>
                    <p class="text-lg">开源举措进一步降低了使用门槛，吸引了大量开发者和AI爱好者的关注，推动了AI应用开发的民主化进程。</p>
                </div>
                <div class="md:w-1/3 text-center">
                    <i class="fas fa-code-branch text-8xl text-purple-300"></i>
                </div>
            </div>
        </div>
    </div>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            },
            themeVariables: {
                primaryColor: '#f0f0ff',
                primaryBorderColor: '#a855f7',
                primaryTextColor: '#333',
                lineColor: '#a855f7',
                textColor: '#333'
            }
        });
    </script>
</body>
</html>